<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%@ taglib uri="/assistant.tld" prefix="at"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>家庭理财</title>
<style type="text/css">
html,body {
	margin: 0;
	padding: 0;
	overflow: hidden; /* Remove scroll bars on browser window */
	font-size: 75%;
}

#MenuPane {
	overflow: auto;
}

#WorkspacePane {
	padding: 2px;
	overflow: auto;
}

.ui-layout-pane { /* all 'panes' */
	background: #FFF;
	border: 1px solid #BBB;
	padding: 10px;
	overflow: auto;
}

.ui-layout-resizer { /* all 'resizer-bars' */
	background: #DDD;
}

.ui-layout-toggler { /* all 'toggler-buttons' */
	background: #AAA;
}

.ui-tabs-nav li {
	position: relative;
}

.ui-tabs-selected a span {
	padding-right: 10px;
}

.ui-tabs-close {
	display: none;
	position: absolute;
	top: 3px;
	right: 0px;
	z-index: 800;
	width: 16px;
	height: 14px;
	font-size: 10px;
	font-style: normal;
	cursor: pointer;
}

.ui-tabs-selected .ui-tabs-close {
	display: block;
}

.ui-layout-west .ui-jqgrid tr.jqgrow td {
	border-bottom: 0px none;
}

.ui-datepicker {
	z-index: 1200;
}
</style>
<at:res base="webRoot" />
<at:res css="/res/scripts/yui/reset-fonts-grids/reset-fonts-grids.css" />
<at:res css="/res/themes/default/jquery/jquery-ui.css" />
<at:res css="/res/themes/default/jquery/ui.jqgrid.css" />

<at:res css="/res/themes/default/css/assistant.css" />

<at:res js="/res/scripts/jquery/jquery.js" />
<at:res js="/res/scripts/jquery/jquery-ui.js" />
<at:res js="/res/scripts/jquery/jquery.layout.js" />
<at:res js="/res/scripts/jquery/i18n/grid.locale-en.js" />
<at:res js="/res/scripts/jquery//jquery.jqGrid.js" />

<at:res js="/res/scripts/calendar/WdatePicker.js" />
<at:res js="/res/scripts/assistant.js" />
</head>
<body>
<div class="ui-layout-north" style="background-color: #B6CDE1;color: #fff;">Header</div>

<div id="MenuPane" class="ui-layout-west ui-widget ui-widget-content">
	<table id="menu-grid"></table>
</div>

<div id="WorkspacePane" class="ui-layout-center ui-helper-reset ui-widget-content" ><!-- Tabs pane -->
	<div id="tabs" class="jqgtabs">
		<ul>
			<li><a href="#tabs-1">首页</a></li>
		</ul>
		<div id="tabs-1" style="font-size:12px;"> After lot of work, I'm happy to introduce a new jqGrid 3.5 version. <br/>
			<br/>
			Enjoy
		</div>
	</div>
</div><!-- #WorkspacePane -->

<div class="ui-layout-east">Ad</div>

<div class="ui-layout-south" style="background-color: #93B2CC;color: #fff;">Footer</div>
</body>
</html>
<script language="JavaScript">
/**
 * 页面布局
 */
$(document).ready(function () {
	var myLayout = $('body').layout({
		closable:false,
		resizable:false,
		slidable:false,
		spacing_open:5,
		spacing_closed:10,
		north__size:50,
		west__resizable:false,
		west__slidable:true,
		west__closable:true,
		west__spacing_open:5,
		west__spacing_closed:10,
		west__size:180,
		west__minSize:160,
		west__maxSize:300,
		east__size:160,
		south__size:20,
		west__onresize: function (pane, $Pane) {
			$("#menu-grid").setGridWidth($Pane.innerWidth()-2);
		}
	});
});

/**
 * 工作区管理和加载菜单
 */
var gridimgpath = webRoot + '/res/themes/default/images';
$(document).ready(function(){
//	$.jgrid.defaults = $.extend($.jgrid.defaults,{loadui:"enable"});
	
	var maintab =$('#tabs','#WorkspacePane').tabs({
        add: function(e, ui) {
            // append close thingy
            $(ui.tab).parents('li:first')
                .append('<span class="ui-tabs-close ui-icon ui-icon-close" title="Close Tab"></span>')
                .find('span.ui-tabs-close')
                .click(function() {
                    maintab.tabs('remove', $('li', maintab).index($(this).parents('li:first')[0]));
                });
            // select just added tab
            maintab.tabs('select', '#' + ui.panel.id);
        }
    });

	var dataUrl = webRoot + "/hcm/vmenu.t?m=getTallyMenuNodes";
    
    $("#menu-grid").jqGrid({
        url: dataUrl,
        datatype: "xml",
        height: "auto",
        pager: false,
        loadui: "disable",
        colNames: ["id","Menu","url"],
        colModel: [
            {name: "id",width:1,hidden:true, key:true},
            {name: "name", width:150, resizable: false, sortable:false},
            {name: "url",width:1,hidden:true}
        ],
        treeGrid: true,
		caption: "",
        ExpandColumn: "name",
        autowidth: true,
        //width: 180,
        rowNum: 200,
//        loadonce: true,
        ExpandColClick: true,
        treeIcons: {leaf:'ui-icon-document-b'},
        onSelectRow: function(rowid) {
            var treedata = $("#menu-grid").getRowData(rowid);
            if(treedata.isLeaf=="true") {
                //treedata.url
                var st = "#t"+treedata.id;
				if($(st).html() != null ) {
					maintab.tabs('select',st);
				} else {
					maintab.tabs('add',st, treedata.name);
					$(st,"#tabs").load(treedata.url);
				}
            }
        }
    });
// end splitter
});

/**
 * 下载当前用户的信息
 */
 downLoadCurrentUserInfo();
</script>
